<template>
  <div class="djradio">
    <interval height="120" />
    <el-alert
      title="sorry，暂无电台具体播放数据 ┗( T﹏T )┛"
      show-icon
      type="error"
    />
    <el-select
      v-model="selectValue"
      @change="cateSelect"
      placeholder="选择电台"
    >
      <el-option
        v-for="item in cateList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <interval height="30" />

    <showcase
      name="djradioList"
      :title="'电台列表'"
      :caseList="djradioList"
      :isSong="false"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import showcase from '@/components/showcase/showcase.vue'
import Interval from '@/components/interval/interval.vue'

export default defineComponent({
  components: { Interval, showcase },
  async setup() {
    const store = useStore()
    const selectValue = ref('')
    const djradioList = ref(null)
    await store.dispatch('djradio/getCateistAction')
    const cateList = store.state.djradio.cateList
    const cateSelect = async (selectValue: string) => {
      await store.dispatch('djradio/getDjradioListAction', { id: selectValue })
      djradioList.value = store.state.djradio.djradioList
      console.log(djradioList.value)
    }
    await store.dispatch('djradio/getDjradioListAction', { id: 3 })
    djradioList.value = store.state.djradio.djradioList
    return {
      selectValue,
      cateList,
      cateSelect,
      djradioList
    }
  }
})
</script>

<style scoped lang="less">
.djradio {
  .el-select {
    width: 100%;
  }
}
</style>
